<template>
    <el-header class="header">
        <div @click="toggleCollapse">
            <el-icon v-if="!isCollapse">
                <Fold />
            </el-icon>
            <el-icon v-else>
                <Expand />
            </el-icon>
        </div>
        <h1>有好牙后台管理系统</h1>
    </el-header>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {
    Expand, Fold
} from '@element-plus/icons-vue'
import useStore from '../store'

// 获取store中的isCollapse状态
const isCollapse = computed(() => {
    const store = useStore()
    return store.isCollapse
})
// 修改store中的isCollapse
const toggleCollapse = () => {
    const store = useStore()
    store.setCollapse()
}
</script>

<style scoped lang="scss">
.header {
    display: flex;
    align-items: center;
    background-color: #F2F7FF;
    // position: fixed;
    // top: 0;
    background-color: #fff;
    width: 100%;
    // z-index: 10;
    h1 {
        font-size: 20px;
        margin-left: 24px;
        text-align: center;
        width: 300px;
        color:rgb(26,90,245);
    }
}
</style>